<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>小米商城</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--第二步：引入css-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" >
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <!--第三步：引入js-->
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
<a style="position: relative" href=""><img class="head" src="images/ios.png"><a href=""><img src="images/top-x.png">
    <a style="position: absolute;top: 1rem;right: 0;width: 1rem;height: 1rem;" href=""><img style="position: absolute; top: 0.4rem;right: 0.4rem;width: .3rem;height: .3rem" src="images/top-x.png"/></a>
<!--</a></a>-->
<!--<a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E6%90%9C%E7%B4%A2.html"><input  class="search" type="search" placeholder="搜索商品名称"/></a>-->
    <input style="width: 100%;height: .6rem;margin-top: -.1rem" type="search" placeholder="搜索商品名称"/>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!--&lt;!&ndash; Indicators &ndash;&gt;-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>

        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
    </ol>
    <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E8%AF%A6%E6%83%851.html">
       <div class="banner" style="margin: .1rem auto">
            <div class="carousel-inner" >
                <div class="item active">
                    <img style="width: 100%;height: 3.6rem" src="images/1(1).jpg">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img style="width: 100%;height: 3.6rem" src="images/1(2).jpg">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img  style="width: 100%;height: 3.6rem" src="images/1(3).jpg">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img style="width: 100%;height: 3.6rem" src="images/1(4).jpg">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img style="width: 100%;height: 3.6rem" src="images/1(5).jpg">
                    <div class="carousel-caption">

                    </div>
                </div>

            </div>


        </div>
       <!--<div class="banner" style="width: 100%;height: 3.6rem"> <img style="width: 100%;height: 3.6rem;" src="images/1(4).jpg" alt=""/></div>-->

    </a>

    <!-- Wrapper for slides -->

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="sr-only">Next</span>
    </a>
</div>
<div class="chanpin3">
    <div class="chanpin33">
        <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html"><img src="images/xiaominote.jpg"></a>
        <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html"><img src="images/4c.jpg"></a>
        <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html"><img src="images/hongminote3.jpg"></a>
    </div>
    <div class="tupian">
        <div class="row">
            <div class="col-xs-12 col-sm-12">
                <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0; " >
                        <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
                            <a  href="#" style="display:block;"><img  src="images/list1.jpg"  style="width:2.54rem;height:1.45141rem;margin-bottom:10px;"/></a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">小米手机5</h5>
                            <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>骁龙820处理器/4GB内存/128GB闪存/4轴防抖相机/
                                3D陶瓷机身</p><p class="price">1999  元起</p></div>
                        </div>
                    </div>
                </a>
                <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0; position: relative">
                        <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
                            <a href="#" style="display:block;"><img src="images/list1.jpg"  style="width:2.54rem;height:1.45141rem;margin-bottom:10px;"/><img src="images/xinpinicon.png"
                                                                                                                                                              style="width: 1.2rem; height: 1.2rem; position: absolute; top: 0.7rem; left: 0.3rem;"></a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">小米手机5 </h5>
                            <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>骁龙820处理器/4GB内存/128GB闪存/4轴防抖相机/
                                3D玻璃机身</p><p class="price">2599  元起</p></div>
                        </div>
                    </div>
                </a>
                <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0; position: relative">
                        <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
                            <a href="#" style="display:block;"><img src="images/list3.jpg"  style="width:2.54rem;height:1.45141rem;margin-bottom:10px;"/>
                                <img src="images/hot.png" style="width: 1.2rem; height: 1.2rem;position: absolute; top: 0.7rem; left: 0.3rem;"></a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">小米4s</h5>
                            <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>骁龙808处理器/64GB大容量/指纹识别/全网通双卡双待/5英寸屏非凡手感
                            </p><p class="price">1699  元起</p></div>
                        </div>
                    </div>
                </a>
                <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0;">
                        <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
                            <a href="#" style="display:block;"><img src="images/list4.jpg"  style="width:2.54rem;height:1.45141rem;margin-bottom:10px;"/></a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">红米手机3 </h5>
                            <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>指纹识别/全网通双卡双待/金属机身/4100mAh
                                大电池/3GB内存+32GB容量
                            </p><p class="price">899  元起</p></div>
                        </div>
                    </div>
                </a>
                <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0;">
                        <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
                            <a href="#" style="display:block;"><img src="images/list5.jpg"  style="width:2.54rem;height:1.45141rem;margin-bottom:10px;"/></a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">小米Note</h5>
                            <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>独立HiFi音乐系统/5.7英寸全高清屏幕/骁龙801四核处理器
                            </p><p class="price">1499  元起</p></div>
                        </div>
                    </div>
                </a>
                <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0;">
                        <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
                            <a href="#" style="display:block;"><img src="images/list6.jpg"  style="width:2.54rem;height:1.45141rem;margin-bottom:10px;"/></a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">小米手机</h5>
                            <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>Type-C双面充电接口/红外遥控/5英寸全高清阳光屏/骁龙808六核处理器
                                3D陶瓷机身</p><p class="price">1999  元起</p></div>
                        </div>
                    </div>
                </a>
                <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0;">
                        <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
                            <a href="#" style="display:block;"><img src="images/list7.jpg"  style="width:2.54rem;height:1.45141rem;margin-bottom:10px;"/></a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">红米Note3</h5>
                            <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>金属机身/指纹识别/4050mAh大电池/5.5英寸全高清屏
                                3D陶瓷机身</p><p class="price">899  元起</p></div>
                        </div>
                    </div>
                </a>
                <a href=http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0;">
                        <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
                            <a href="#" style="display:block;"><img src="images/list8.jpg"  style="width:2.54rem;height:1.45141rem;margin-bottom:10px;"/></a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">红米手机3</h5>
                            <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>金属机身/4100mAh大电池/5英寸阳光屏/骁龙616八核处理器/2GB内存+16GB容量
                            </p><p class="price">699  元起</p></div>
                        </div>
                    </div>
                </a>
                <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.html">
                    <div class="media" style="border-bottom: 1px solid #ddd;padding: 16px 0 10px 0;margin: 0;">
                        <div class="media-left" style="padding-top: 16px;padding-right: 30px;text-align: center;">
                            <a href="#" style="display:block;"><img src="images/list9.jpg"  style="width:2.54rem;height:1.45141rem;margin-bottom:10px;"/></a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading title" style="max-height:50px;margin:30px 0;font-weight:bold;font-size: .3rem">小米手机4</h5>
                            <div class="content" style="height:70px;overflow:hidden;line-height: 24px;font-size: .25rem"><p>不锈钢边框/5英寸屏超窄边/骁龙801四核处理器/MIUI、Win10双系统
                            </p><p class="price">1299  元起</p></div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<div style="width: 100%;height:.89rem;clear: both"></div>
<footer>
    <!--商城-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">商城</p>

        </section>

    </a>
    <!--分类-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%88%86%E7%B1%BB.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">分类</p>

        </section>

    </a>
    <!--购物车-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E8%B4%AD%E7%89%A9%E8%BD%A6.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">购物车</p>

        </section>

    </a>
    <!--服务-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">服务</p>

        </section>

    </a>
</footer>

</body>


</html>
<script>
    $(function()
    {
        function fullwidth()
        {
            if($('body').width() >= 640)
            {
                $('html').css('font-size',100 + 'px');
                return;
            }
            var scale = $('body').width() / 640;
            $('html').css('font-size',scale * 100 + 'px');
        }
        fullwidth();
        $(window).resize(function()
        {
            fullwidth();
        })
    });
</script>